<%@ page import="cn.edu.njust.service.trService" %>
<%@ page import="cn.edu.njust.service.impl.trServiceImpl" %>
<%@ page import="cn.edu.njust.pojo.Transcipt" %>
<%@ page import="cn.edu.njust.pojo.User" %>
<%@ page import="java.util.List" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>CCF预报名系统|我的信息</title>

    <!-- Google Font: Source Sans Pro -->
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="./plugins/fontawesome-free/css/all.min.css">
    <!-- DataTables -->
    <link rel="stylesheet" href="./plugins/datatables-bs4/css/dataTables.bootstrap4.min.css">
    <link rel="stylesheet" href="./plugins/datatables-responsive/css/responsive.bootstrap4.min.css">
    <link rel="stylesheet" href="./plugins/datatables-buttons/css/buttons.bootstrap4.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="./dist/css/adminlte.min.css">

    <script src="./js/axios-0.18.0.js"></script>

</head>
<body class="hold-transition sidebar-mini">

<%--<h1><%=i%><%=tr1%></h1>--%>
<div class="wrapper" id="app">
    <nav class="main-header navbar navbar-expand navbar-white navbar-light">
        <!-- Left navbar links -->
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
            </li>
        </ul>

        <!-- Right navbar links -->
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <button type="button" class="btn btn-info" onclick="exitRegister()">退出当前登录</button>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-widget="fullscreen" href="#" role="button">
                    <i class="fas fa-expand-arrows-alt"></i>
                </a>
            </li>
        </ul>
    </nav>
    <!-- /.navbar -->

    <!-- Main Sidebar Container -->
    <aside class="main-sidebar sidebar-dark-primary elevation-4">
        <!-- Brand Logo -->
        <a href="#" class="brand-link">
            <img src="./dist/img/AdminLTELogo.png" alt="CCF预报名系统" class="brand-image img-circle elevation-3"
                 style="opacity: .8">
            <span class="brand-text font-weight-light">CCF预报名系统</span>
        </a>

        <!-- Sidebar -->
        <div class="sidebar">
            <!-- Sidebar Menu -->
            <nav class="mt-2">
                <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu"
                    data-accordion="false">
                    <!-- Add icons to the links using the .nav-icon class
                         with font-awesome or any other icon font library -->
                    <li class="nav-item">
                        <a href="/CCF_Pre_Registration_System/preRegister.jsp" class="nav-link">
                            <i class="nav-icon fas fa-newspaper"></i>
                            <p>预报名</p>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="/CCF_Pre_Registration_System/myInfo.jsp" class="nav-link">
                            <i class="nav-icon fas fa-id-card"></i>
                            <p>我的信息</p>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="/CCF_Pre_Registration_System/changeInfo.jsp" class="nav-link">
                            <i class="nav-icon fas fa-id-card"></i>
                            <p>修改信息</p>
                        </a>
                    </li>
                </ul>
            </nav>
            <!-- /.sidebar-menu -->
        </div>
        <!-- /.sidebar -->
    </aside>
    <!-- Content Wrapper. Contains page content -->


    <div class="content-wrapper">
        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">
                <!--用户信息-->
                <div class="card card-widget widget-user shadow">
                    <!-- Add the bg color to the header using any of the bg-* classes -->
                    <div style="text-align: center;background-color: #1C86EE;height: 100px">
                        <div style="color: white;text-align: center;font-size:25px;line-height: 100px">学生个人信息</div>
                    </div>
                    <div class="card-footer">

                        <div class="form-group">
                            <label for="exampleInputId_no1">学号</label>
                            <input type="text" class="form-control" id="exampleInputId_no1"
                                   placeholder=${loginUser.idNo} disabled>
                        </div>
                        <div class="form-group">
                            <label for="exampleInputName1">姓名</label>
                            <input type="text" class="form-control" id="exampleInputName1"
                                   placeholder=${loginUser.uName} disabled>
                        </div>
                        <div class="form-group">
                            <label for="exampleInputGrade1">年级</label>
                            <input type="text" class="form-control" id="exampleInputGrade1"
                                   placeholder=${loginUser.grade} disabled>
                        </div>
                        <div class="form-group">
                            <label for="exampleInputEmail1">联系邮箱</label>
                            <input type="email" class="form-control" id="exampleInputEmail1"
                                   placeholder=${loginUser.email} disabled>
                        </div>
                        <div class="form-group">
                            <label for="exampleInputTelephone1">联系电话</label>
                            <input type="text" class="form-control" id="exampleInputTelephone1"
                                   placeholder=${loginUser.telephone} disabled>
                        </div>


                    </div>



                </div>
                <!-- 柱状图 -->
                <div class="card card-primary card-outline">
                    <div class="card-header">
                        <h3 class="card-title">
                            <i class="far fa-chart-bar"></i>
                            柱状图
                        </h3>

                        <div class="card-tools">
                            <button type="button" class="btn btn-tool" data-card-widget="collapse">
                                <i class="fas fa-minus"></i>
                            </button>
                            <button type="button" class="btn btn-tool" data-card-widget="remove">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                    </div>
                    <div class="card-body">
                        <div id="bar-chart" style="height: 300px;"></div>
                    </div>
                    <!-- /.card-body-->
                </div>
                <!-- /.card -->
            </div>
        </section>
    </div>
    <!-- /.widget-user -->

    <!-- /.content -->
</div>


<!-- Control Sidebar -->
<aside class="control-sidebar control-sidebar-dark">
    <!-- Control sidebar content goes here -->
</aside>
<!-- /.control-sidebar -->
</div>
<!-- jQuery -->
<script src="./plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="./plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- DataTables  & Plugins -->
<script src="./plugins/datatables/jquery.dataTables.min.js"></script>
<script src="./plugins/datatables-bs4/js/dataTables.bootstrap4.min.js"></script>
<script src="./plugins/datatables-responsive/js/dataTables.responsive.min.js"></script>
<script src="./plugins/datatables-responsive/js/responsive.bootstrap4.min.js"></script>
<script src="./plugins/datatables-buttons/js/dataTables.buttons.min.js"></script>
<script src="./plugins/datatables-buttons/js/buttons.bootstrap4.min.js"></script>
<script src="./plugins/jszip/jszip.min.js"></script>
<script src="./plugins/pdfmake/pdfmake.min.js"></script>
<script src="./plugins/pdfmake/vfs_fonts.js"></script>
<script src="./plugins/datatables-buttons/js/buttons.html5.min.js"></script>
<script src="./plugins/datatables-buttons/js/buttons.print.min.js"></script>
<script src="./plugins/datatables-buttons/js/buttons.colVis.min.js"></script>
<script src="./plugins/flot/jquery.flot.js"></script>
<!-- FLOT RESIZE PLUGIN - allows the chart to redraw when the window is resized -->
<script src="./plugins/flot/plugins/jquery.flot.resize.js"></script>
<!-- FLOT PIE PLUGIN - also used to draw donut charts -->
<script src="./plugins/flot/plugins/jquery.flot.pie.js"></script>
<!-- AdminLTE App -->
<script src="./dist/js/adminlte.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="./dist/js/demo.js"></script>
<script src="./js/axios-0.18.0.js"></script>
<script src="./js/vue.js"></script>

<!--图表数据-->
<script>
    //当页面加载完成后发送Ajax请求
    // window.onload = function() {
    // }(i+1),tr
    new Vue({
        el: "#app",
        mounted() {
            var _this = this;
            axios({
                method: "get",
                url: "/CCF_Pre_Registration_System/showServlet"
            }).then(function (response) {
                let trs = response.data;
                for (let i = 0; i < trs.length; i++) {
                    let tr = trs[i];
                    _this.bar_data.data[i] = [i + 1, Number(tr)];
                }
                $.plot('#bar-chart', [_this.bar_data], {
                    grid: {
                        borderWidth: 1,
                        borderColor: '#f3f3f3',
                        tickColor: '#f3f3f3'
                    },
                    series: {
                        bars: {
                            show: true, barWidth: 0.5, align: 'center',
                        },
                    },
                    colors: ['#3c8dbc'],
                    xaxis: {
                        ticks: [[1, '第一次'], [2, '第二次'], [3, '第三次'], [4, '第四次'], [5, '第五次'], [6, '第六次'], [7, '第七次'], [8, '第八次'], [9, '第九次'], [10, '第十次']]
                    }
                })
            })
        },
        methods: {},
        data() {
            return {
                bar_data: {
                    // data : [[1,100], [5,500], [4,400], [3,300], [2,200], [6,100]],
                    data: [],
                    bars: {show: true}
                },
            }
        }
    })
    // var score = [];
    // $(function () {
    //     //data用于存储柱状图数据，即分数，如[1,100]意为第一次考试成绩为100
    //     axios({
    //         method: "get",
    //         url: "/CCF_Pre_Registration_System/showServlet"
    //     }).then(function (response) {
    //         let trs = response.data;
    //         for (let i = 0; i < trs.length; i++) {
    //             let tr = trs[i];
    //             // console.log(tr);
    //             score[i] = Number(tr);
    //             // var arr = [(i + 1), parseInt(tr)];
    //             // _data[i] = arr;
    //             bar_data.data[i] = [i+1,parseInt(tr)];
    //
    //             // console.log(bar_data.data[i]);
    //         }
    //     })
    //     console.log(score[0]);
    //
    //     var bar_data = {
    //         // data : [[1,100], [5,500], [4,400], [3,300], [2,200], [6,100]],
    //         data : [[1,100], [5,500], [4,400], [3,300], [2,score[1]], [6,100]],
    //         bars: {show: true}
    //     }
    //
    //     $.plot('#bar-chart', [bar_data], {
    //         grid: {
    //             borderWidth: 1,
    //             borderColor: '#f3f3f3',
    //             tickColor: '#f3f3f3'
    //         },
    //         series: {
    //             bars: {
    //                 show: true, barWidth: 0.5, align: 'center',
    //             },
    //         },
    //         colors: ['#3c8dbc'],
    //         xaxis: {
    //             ticks: [[1, '第一次'], [2, '第二次'], [3, '第三次'], [4, '第四次'], [5, '第五次'], [6, '第六次'], [7, '第七次'], [8, '第八次'], [9, '第九次'], [10, '第十次']]
    //         }
    //     })
    //     /* END BAR CHART */
    // })


    /*
     * Custom Label formatter
     * ----------------------
     */
    function labelFormatter(label, series) {
        return '<div style="font-size:13px; text-align:center; padding:2px; color: #fff; font-weight: 600;">'
            + label
            + '<br>'
            + Math.round(series.percent) + '%</div>'
    }

    function exitRegister() {
        axios({
            method: "post",
            url: "/CCF_Pre_Registration_System/systemControl/exitCurrentLoginUser"
        }).then(function (resp) {
            if (resp.data === "success") {
                window.location.href = "index.jsp";
            } else {
                alert("请重试");
            }
        })
    }
</script>
</body>
</html>